<template>
  <el-tabs v-model="activeName" @tab-click="tabChange">
    <el-tab-pane label="基本信息" name="info">
      <div class="detail-panel">
        <div class="item">
          <div class="label">宠物图片</div>
          <div class="text avater">
            <img v-if="pet.avatarImg" :src="pet.avatarImg">
          </div>
        </div>
        <div class="item">
          <div class="label">宠物名字</div>
          <div class="text">{{ pet.name }}</div>
        </div>
        <div class="item">
          <div class="label">类别 / 品种</div>
          <div class="text">
            <template v-for="(value, key) in pet.type">{{ key ? ' / ' : '' }}{{ value }}</template>
          </div>
        </div>
        <div class="item">
          <div class="label">宠物性别</div>
          <div class="text">{{ pet.sex ? '雄' : '雌' }}</div>
        </div>
        <div class="item">
          <div class="label">宠物生日</div>
          <div class="text">{{ pet.brithday }}</div>
        </div>
        <div class="item">
          <div class="label">宠物体重</div>
          <div class="text">{{ pet.weight }}</div>
        </div>
        <div class="item">
          <div class="label">是否绝育</div>
          <div class="text">{{ pet.isSterile ? '是' : '否' }}</div>
        </div>
        <div class="item">
          <div class="label">是否免疫完善</div>
          <div class="text">{{ pet.isImmune ? '是' : '否' }}</div>
        </div>
        <div class="item">
          <div class="label">体外驱虫</div>
          <div class="text">{{ pet.inVitroDeworming }}</div>
        </div>
        <div class="item">
          <div class="label">体内驱虫</div>
          <div class="text">{{ pet.inVivoDeworming }}</div>
        </div>
        <div class="item">
          <div class="label">备注</div>
          <div class="text">{{ pet.remark }}</div>
        </div>
      </div>
    </el-tab-pane>
    <el-tab-pane label="在线问诊记录" name="consultation">
      <Consultation
        :total="consultationPage.total"
        :size="consultationPage.size"
        :inputPetId="this.petId"
      />
    </el-tab-pane>
    <el-tab-pane label="健康就医记录" name="treatment">
      <Treatment
        :serviceList="serviceList"
        :total="servicePage.total"
        :currentPage="servicePage.currentPage"
        :size="servicePage.size"
      />
    </el-tab-pane>
    <el-tab-pane label="预约挂号记录" name="reservation">
      <ConsultationReservation :petId="this.petId"/>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
import Consultation from "@/components/pet/consultation/List.vue";
import Treatment from "@/components/pet/treatment/List.vue";
import ConsultationReservation from "@/components/pet/reservation/Reservation.vue";

export default {
  data() {
    return {
      page: {
        total: 0,
        currentPage: 1,
        size: 10
      },
      pet: {},
      consultationList: [],
      consultationPage: {
        total: 0,
        currentPage: 1,
        size: 10
      },
      serviceList: [],
      servicePage: {
        total: 0,
        currentPage: 1,
        size: 10
      },
      servicePage: {
        total: 0,
        currentPage: 1,
        size: 10
      },
      activeName: "info"
    };
  },
  props: ["petId"],
  components: {
    Consultation,
    Treatment,
    ConsultationReservation
  },
  mounted() {
    this.getPetInfoData();
  },
  methods: {
    tabChange(tab) {
      switch (tab.name) {
        case "consultation":
          this.getConsultationListData(this.petId);
          break;
        case "treatment":
          this.getServiceListData();
          break;
        default:
          break;
      }
    },

    getPetInfoData() {
      let id = this.petId;
      this.axios.get("/doctor/pets/" + id).then(response => {
        if (response.data.code == 200) {
          this.pet = response.data.data;
        } else {
          this.$message({
            message: response.data.msg,
            type: "error"
          });
        }
      });
    },
    getConsultationListData() {
      let petId = this.petId;
      this.axios
        .get("/doctor/consultations/pet/" + petId + "/list", {
          params: {
            pageSize: this.page.size,
            currentPage: this.page.currentPage
          }
        })
        .then(response => {
          if (response.data.code == 200) {
            this.consultationList = response.data.data.data;
            this.consultationPage.total = response.data.data.total;
          } else {
            this.$message({
              message: "数据加载失败!",
              type: "error"
            });
          }
        });
    },
    getServiceListData() {
      let petId = this.petId;
      this.axios
        .get("/doctor/services/pet/" + petId + "/list", {
          params: {
            pageSize: this.page.size,
            currentPage: this.page.currentPage
          }
        })
        .then(response => {
          if (response.data.code == 200) {
            this.serviceList = response.data.data.data;
            this.servicePage.total = response.data.data.total;
          } else {
            this.$message({
              message: "数据加载失败!",
              type: "error"
            });
          }
        });
    }
  }
};
</script>
